<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 1000px;height: 300px;margin: 20px auto;position: relative;}
        #box a{width: 1000px;height: 300px;position: absolute;overflow: hidden;}
        #box a:nth-child(1){z-index: 1}

        #box img{width: 1000px;height: 300px;}

        #box input{position:absolute;top:125px;width:50px;height:50px;z-index: 99999999;}
        #left{left:0}
        #right{right: 0}
    </style>
</head>
<body>
    <div id="box">
        <div class="imgbox">
            <a><img src="./imgs/banner1.jpg" alt=""></a>
            <a><img src="./imgs/banner2.jpg" alt=""></a>
            <a><img src="./imgs/banner3.jpg" alt=""></a>
            <a><img src="./imgs/banner4.jpg" alt=""></a>
        </div>
        <input type="button" id="left" value="<<<">
        <input type="button" id="right" value=">>>">
    </div>
</body>
<script src="./move.js"></script>
<script>
    var oleft = document.getElementById("left");
    var oright = document.getElementById("right");
    var aimg = document.querySelectorAll("#box a");

    // 初始索引
    var index = 0;

    // css的z-index的层级
    var i=1;

    oright.onclick = function(){
        // 计算索引
        if(index === aimg.length-1){
            index = 0;
        }else{
            index++;
        }

        // 通过css的z-index层级设置图片显示
        aimg[index].style.zIndex = i++;
        
        // 清空某个属性，准备做运动
        aimg[index].style.width = 0;
        // 运动
        move(aimg[index], {width:1000});

        // aimg[index].style.width = 0;
        // aimg[index].style.height = 0;
        // aimg[index].style.opacity = 0;
        // move(aimg[index],{width:1000,height:150,opacity:50},function(){
        //     move(aimg[index],{height:300,opacity:100})
        // })
    }

</script>
</html>